<template>
	<view class="safety-code-apply">
		<!-- 安全码申请页面 -->
		<view class="top">
			<view class="label">个人信息</view>
			<view class="flex-box">
				<view class="name">姓名</view>
				<view class="text">{{userInfo.real_name}}</view>
			</view>
			<view class="flex-box">
				<view class="name">身份证号</view>
				<view class="text">{{userInfo.empIdCard}}</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="label">资格证信息</view>
				<view class="flex-box">
					<view class="name">从业资格类别</view>
					<view class="text">{{item.qualificaCategory}}</view>
				</view>
				<view class="flex-box">
					<view class="name">从业资格证号</view>
					<view class="text">{{item.qualificaCategoryNo}}</view>
				</view>
				<view class="flex-box">
					<view class="name">有效期</view>
					<view class="text">{{item.qualifiCertificateTo}}</view>
				</view>
				<view class="flex-box">
					<view class="name">所属企业</view>
					<view class="text">{{item.certificationOffice}}</view>
				</view>
			</view>
		</view>
		<view class="apply-btn" @click="applyHandle">申请</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo || {};
			}
		},
		methods: {
			applyHandle() {
				this.$api.staffList({
					archiveCode: this.userInfo.empIdCard,
				}).then(res => {
					if (res.data.success) {
						uni.showToast({
							title: "申请成功",
							icon: 'success',
							duration: 1500,
							success: () => {
								this.userInfo.isApplied = true;
								this.$store.commit('set_userInfo', this.userInfo);
								setTimeout(() => {
									this.$goBack('/pages/mine/mine', 4);
								}, 1500);
							}
						})
					} else {
						uni.showToast({
							title: '申请失败:' + res.data.msg,
							icon: "none"
						})
					}
				})
			}
		},
		onLoad() {
			if (this.userInfo.empIdCard) {
				this.$api.myZj({
					idCard: this.userInfo.empIdCard,
				}).then(res => {
					this.list = res.data.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.safety-code-apply {
		padding: 20rpx;

		.top {
			background: #FFFFFF;
			box-shadow: 0 4rpx 6rpx 1rpx rgba(84, 83, 83, 0.16);
			border-radius: 16rpx;
			margin-bottom: 40rpx;
			padding: 30rpx 30rpx 40rpx;

			.flex-box {
				display: flex;
				line-height: 62rpx;
				margin-bottom: 36rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.name {
					color: #333;
					font-size: 28rpx;
					width: 5em;
				}

				.text {
					height: 62rpx;
					flex: 1;
					padding: 0 16rpx;
					background: #f2f2f2;
					font-size: 26rpx;
					border-radius: 8rpx;
				}
			}
		}

		.list {
			padding-bottom: 120rpx;

			.item {
				background: #FFFFFF;
				box-shadow: 0 4rpx 6rpx 1rpx rgba(84, 83, 83, 0.16);
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				padding: 30rpx 30rpx 40rpx;

				.flex-box {
					display: flex;
					line-height: 36rpx;
					margin-bottom: 26rpx;
					font-size: 26rpx;

					.name {
						color: #666;

					}

					.text {
						flex: 1;
						text-align: right;
						color: #333;
					}
				}
			}
		}

		.label {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.apply-btn {
			position: fixed;
			bottom: 20rpx;
			left: 20rpx;
			right: 20rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #fff;
			border-radius: 23rpx 23rpx 23rpx 23rpx;
			background: #FFD14A;
			font-size: 28rpx;
			text-align: center;
			box-shadow: 0 0 10rpx 2rpx rgba(84, 83, 83, 0.16);
		}
	}
</style>
